import 'package:dots_indicator/dots_indicator.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:inmotion_pro/l10n/local.dart';
import 'package:inmotion_pro/pages/main/realtime_detail/forms/battery_temperature_form.dart';
import 'package:inmotion_pro/pages/main/realtime_detail/forms/iq_form.dart';
import 'package:inmotion_pro/pages/main/realtime_detail/forms/motor_temperature_form.dart';
import 'package:inmotion_pro/pages/main/realtime_detail/state.dart';
import 'package:lx_widgets_library/lx_widgets_library.dart';

import '../../models/realtime_item.dart';
import 'controller.dart';
import 'forms/output_rate_form.dart';
import 'forms/speedometer_form.dart';
import 'forms/voltage_form.dart';
import 'widgets/realtime_item_view.dart';

// 车辆实时详情页面
class VehicleRealtimeDetailView
    extends BaseGetView<VehicleRealtimeDetailController> {
  VehicleRealtimeDetailView({super.key});

  @override
  String? get title => local.realtime_info;

  @override
  List<Widget>? get rightViews => [
        Obx(
          () => LxButton(
            title: controller.state.isEdit.value ? local.apply : local.edit,
            height: navigationBarHeight * 0.9,
            buttonTypeCustomColor: ButtonTypeColor()
              ..borderColor = Colors.transparent
              ..backgroundColor = Colors.transparent
              ..textColor = LxCol.theme,
            onTap: () => controller.editRealtimeItemsOnTap(),
          ),
        )
      ];

  @override
  Widget buildBody(BuildContext context) {
    double formHeight = screenWidth - CONTENT_MARGIN * 2;
    return Scaffold(
      backgroundColor: Colors.black,
      body: SingleChildScrollView(
        child: Column(
          children: [
            Stack(
              children: [
                SizedBox(
                  height: formHeight,
                  child: Obx(() {
                    return PageView.builder(
                      controller: PageController(
                        initialPage: controller.state.currentIndex.value,
                      ),
                      itemCount: controller.state.formTypes.length,
                      onPageChanged: (index) {
                        controller.state.currentIndex.value = index;
                      },
                      itemBuilder: (context, index) {
                        switch (controller.state.formTypes[index]) {
                          case VehicleRealtimeFormType.speed:
                            return SpeedometerForm(
                              controller.state.currentSpeed,
                              controller.state.speedUnit,
                              CONTENT_MARGIN,
                              formHeight,
                              8.w,
                              Colors.black,
                            );
                          case VehicleRealtimeFormType.outputRate:
                            return OutputRateForm(
                              outputRate: controller.state.currentOutputRate,
                              maxOutputRate:
                                  controller.state.currentOutputRateMax,
                              height: formHeight,
                              onClear: () => controller
                                  .state.currentOutputRateMax.value = 0.0,
                            );
                          case VehicleRealtimeFormType.iq:
                            return IqForm(
                              iq: controller.state.currentIq,
                              maxIq: controller.state.currentIqMax,
                              height: formHeight,
                              onClear: () =>
                                  controller.state.currentIqMax.value = 0.0,
                            );
                          case VehicleRealtimeFormType.voltage:
                            return VoltageForm(
                              controller.state.currentVoltage,
                              height: formHeight,
                            );
                          case VehicleRealtimeFormType.batteryTemperature:
                            return BatteryTemperatureForm(
                              controller.state.currentBatteryTemperature,
                              height: formHeight,
                            );
                          case VehicleRealtimeFormType.motorTemperature:
                            return MotorTemperatureForm(
                              controller.state.currentMotorTemperature,
                              height: formHeight,
                            );
                          default:
                            return const SizedBox.shrink();
                        }
                      },
                    );
                  }),
                ),
                Positioned(
                  bottom: CONTENT_MARGIN,
                  left: 0,
                  right: 0,
                  child: Obx(
                    () => DotsIndicator(
                      dotsCount: controller.state.formTypes.length,
                      position: controller.state.currentIndex.value.toDouble(),
                      decorator: DotsDecorator(
                        color: GrayColor.gray5, // 未选中点的颜色
                        activeColor: LxCol.theme, // 选中点的颜色
                        size: const Size.square(4.0),
                        activeSize: const Size(16.0, 4.0),
                        spacing: const EdgeInsets.symmetric(horizontal: 3.0),
                        activeShape: RoundedRectangleBorder(
                          borderRadius: BorderRadius.circular(2.0),
                        ),
                      ),
                    ),
                  ),
                ),
              ],
            ),
            SizedBox(height: CONTENT_MARGIN / 2),
            Obx(() {
              double itemHeight = 100.w;
              List<RealtimeItemModel> realtimeItemModels =
                  controller.state.isEdit.value
                      ? controller.state.realtimeItems
                          .map((element) => element.copyWith(isEditable: true))
                          .toList()
                      : controller
                          .sortedRealtimeItems(controller.state.realtimeItems)
                          .map((e) => e.copyWith(isEditable: false))
                          .toList();
              return SizedBox(
                height: (itemHeight + CONTENT_MARGIN) *
                        ((realtimeItemModels.length + 1) ~/ 2) +
                    CONTENT_MARGIN,
                child: CollectionView<RealtimeItemModel>(
                  items: realtimeItemModels,
                  itemsPerRow: 2,
                  horizontalSpacing: CONTENT_MARGIN,
                  verticalSpacing: CONTENT_MARGIN,
                  padding: EdgeInsets.all(CONTENT_MARGIN),
                  physics: const NeverScrollableScrollPhysics(),
                  itemBuilder: (context, item, index) {
                    return SizedBox(
                      height: itemHeight,
                      child: RealtimeItemView(
                        model: item,
                        checkboxOnChanged: (isSelected) {
                          controller.realtimeItemSelectedOnTap(
                            index,
                            isSelected,
                          );
                        },
                      ),
                    );
                  },
                ),
              );
            }),
          ],
        ),
      ),
    );
  }
}
